<template>
    <div class="main-content">
      <div class="hot-recommendations">
        <h2 class="section-title">热门动漫视频</h2>
        <div class="video-grid">
          <el-card v-for="video in hotVideos" :key="video.video_name" class="video-card"
            @click="() => router.push(`/videoshow/${video.video_id}`)">
            <el-image :src="video.img" fit="cover" />
            <div class="video-info">
              <h3 class="video-title">{{ video.video_name }}</h3>
              <p class="video-stats">{{ video.views }} views • {{ video.likes }} likes</p>
            </div>
          </el-card>
        </div>
      </div>
      <div class="latest-hot-videos">
        <h2 class="section-title">最热动漫视频</h2>
        <el-card v-for="video in latestVideos" :key="video.video_name" class="latest-video-card"
          @click="() => router.push(`/videoshow/${video.video_id}`)">
          <div class="latest-video-content">
            <el-image :src="video.img" fit="cover" class="latest-video-thumbnail" />
            <div class="latest-video-info">
              <h3 class="video-title">{{ video.video_name }}</h3>
              <p class="video-stats">{{ video.views }} views</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    ElCard,
    ElImage,
    ElDivider
  } from 'element-plus';
  
  const router = useRouter();
  
  const hotVideos = ref([]);
  const latestVideos = ref([]);
  
  // 获取根据点赞推荐的视频列表
  const fetchLikesRecommend = async () => {
    try {
      const response = await fetch('/likesComic', { method: 'GET' });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const contentType = response.headers.get('content-type');
      if (!contentType || !contentType.includes('application/json')) {
        throw new Error('Invalid content type, expected application/json');
      }
      const data = await response.json();
      hotVideos.value = data.map(item => ({
        ...item,
        img: item.img, // 使用 img 作为图片源
        video_id: item.video_id, // 确保 id 是 video_id
        video_name: item.video_name, // 使用 video_name 作为标题
        views: item.views,
        likes: item.likes,
      }));
    } catch (error) {
      console.error('Error fetching likes recommend:', error);
    }
  };
  
  // 获取根据观看数推荐的视频列表
  const fetchViewsRecommend = async () => {
    try {
      const response = await fetch('/viewsComic', { method: 'GET' });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const contentType = response.headers.get('content-type');
      if (!contentType || !contentType.includes('application/json')) {
        throw new Error('Invalid content type, expected application/json');
      }
      const data = await response.json();
      latestVideos.value = data.map(item => ({
        ...item,
        img: item.img, // 使用 img 作为图片源
        video_id: item.video_id, // 确保 id 是 video_id
        video_name: item.video_name, // 使用 video_name 作为标题
        views: item.views,
      }));
    } catch (error) {
      console.error('Error fetching views recommend:', error);
    }
  };
  
  // 在组件挂载时获取数据
  onMounted(() => {
    fetchLikesRecommend();
    fetchViewsRecommend();
  });
  </script>
  
  <style scoped>
  .main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    justify-content: center;
  }
  
  .video-card,
  .latest-video-card {
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
  }
  
  .video-card:hover,
  .latest-video-card:hover {
    transform: scale(1.02);
  }
  
  /* 当页面宽度小于400px时 */
  @media (max-width: 400px) {
    .main-content {
      display: flex;
      flex-direction: column;
    }
  }
  </style>